<template>
  <div class="home" v-if="info">
    <div class="top">
      <!-- 头部 -->
      <Header></Header>
      <!-- 轮播图 -->
      <Carousel :banner="info[0]"></Carousel>
    </div>
    <!-- 功能区 -->
    <Features></Features>
    <!-- 推荐歌单 -->
    <recommendMusic :recomend="info[1]"></recommendMusic>
    <!-- 私人定制 -->
    <PrivateCustom :custom="info[2]"></PrivateCustom>
    <!-- 音乐日历 -->
    <MusicCalendar :calendar="info[3]"></MusicCalendar>
     <!-- 专属场景歌单 -->
    <recommendMusic :recomend="info[4]"></recommendMusic>
    <!-- 24小时播客 -->
    <Podcast :podcast="info[7]"></Podcast>
    <!-- 云村KTV -->
    <!-- <CloundKTV :ktv="info[8]"></CloundKTV> -->
     <!-- 播客合集 -->
    <recommendMusic :recomend="info[8]"></recommendMusic>
     <!-- 视频合集 -->
    <recommendMusic :recomend="info[9]"></recommendMusic>
    <!-- 菜单栏 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import { apiModel } from "@/api/index";
const http = new apiModel();
import Header from "@/components/Header/index";
import Carousel from "@/components/Carousel/index";
import Features from "@/components/Features/index";
import recommendMusic from "@/components/recommendMusic/index";
import PrivateCustom from "@/components/PrivateCustom/index";
import CloundKTV from "@/components/CloundKTV/index";
import MusicCalendar from "@/components/MusicCalendar/index";
import Podcast from "@/components/Podcast/index";
import tabbar from "@/components/tabbar/index";
export default {
  components: {
    Header,
    Carousel,
    Features,
    recommendMusic,
    PrivateCustom,
    CloundKTV,
    MusicCalendar,
    Podcast,
    tabbar
  },
  data(){
    return{
      info:null
    }
  },
  created(){
    this.getPageInfo()
  },
  methods:{
    getPageInfo(){
      http.getPageinfo().then(res=>{
        console.log(res.data.blocks);
        this.info =res.data.blocks
      })
    }
  }
};
</script>

<style lang="less" scoped>
.top {
  background: linear-gradient(#eaedf2, #fff);
}
.home{
  background: #f7f7f7;
}
</style>